<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.v-enter,.v-leave-to{
				opacity: 0;
				transform: translateX(150px);
			}
			.v-enter-active,
			.v-leave-active{
				transition:all 0.6s ease;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<a href="" @click.prevent="comName='login'">登录</a>
			<a href="" @click.prevent="comName='register'">注册</a>
			<a href="" @click.prevent="comName='delete'">删除</a>
			<transition mode="out-in">
				<component :is="comName"></component>
			</transition>

		</div>
		<script type="text/javascript">
			Vue.component('login',{
				template:'<h3>登录组件</h3>'
			})
			
			Vue.component('register',{
				template:'<h3>注册组件</h3>'
			})
			
			Vue.component('delete',{
				template:'<h3>删除组件</h3>'
			})
			new Vue({
				el:"#app",
				data:{
					comName:"login"
				}
			});
		</script>
	</body>
</html>
